<%@ include file="/jsp/common.jsp" %>
<%@ page  language="java" import="java.util.*" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<head>
<link href="../../css/mainbody_style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../js/jquery-1.4.4.js" ></script>
<style type="text/css">
#table01 tr>td:nth-child(2n-1){text-align:right;}
 
#table02{border-top:solid 1px black; border-left:solid 1px black;}
#table02 td{border-bottom:solid 1px black;border-right:solid 1px;}
#table02 tr:nth-child(2n){background-color:#eee;}
</style>
</head>
<body>
	<div>
	<form id="newForm" method="post" action="">
		<input type="hidden" name="position" id="position" value='<c:out value="${position}"/>' />
		<table style="width:90%;table-layout:fixed;line-height:4em;" id="table01">
			<tr>
				<td>学校：</td>
				<td>
					<input type="text" disabled="disabled"  style="color:blue;background-color:#f4f4f4;font-size:1.1em;"
						name="schoolName" value="<c:out value='${schoolName}'/>" />
				</td>
				<td>年级：</td>
				<td>
					<select name="gradeCode" id="gradeCode" onchange="chgClass()" style="width:90%;">
						<c:forEach items="${gradeList }" var="grade">
							<option value="<c:out value='${grade.dicCode}'/>"> <c:out value="${grade.dicValue }"/> 
						</c:forEach>
					</select>
				</td>
				<td>班级：</td>
				<td>
					<select name="classCode" id="classCode"  style="width:90%;">
						<c:forEach items="${classList }" var="cla">
							<option value="<c:out value='${cla.column02}'/>"> <c:out value="${cla.column01}"/>班
						</c:forEach>
					</select>
				</td>
			</tr>
			<tr>
				<td colspan="6" style="text-align:center;">
					<input type="button" class="button_sub01" value="查询" onclick="queryClassStudentInfo();"/>
				</td>
			</tr>
		</table>
	</form>
	</div>
	
	<div style="width:90%;display:none;" id="resultPald">
		<table style="width:90%;line-height:3em;margin-left:10%;text-align:center;" id="table02" >
			<tr id="trHeadId">
				<td>姓名</td>
				<td>性别</td>
				<td>联系方式</td>
			</tr>
		</table>
	</div>
	
<script>
//年级和班级的联动
function chgClass(){
	var position =  $("#position").val();
	var gradeCode = $("#gradeCode").val();
	$.ajax({
		url:"../../commonAjax.do",
		type:"post",
		data:{
			"position":position,
			"gradeLevel":gradeCode,
			"sql":"school.queryExistSeniorClass"
		},
		success:function(data){
			var resuleCode = data["result"];
			if(resuleCode=="0") return;
			var resList = data["resList"];
			if(resList || resList.length>0){
				$("#classCode").empty();
				for(ind in resList){
					var content = "<option value='"+ resList[ind]["column02"] +"'>" +resList[ind]["column01"] + "班"
					$("#classCode").append(content);
				}
			}
		}
	});
}

function queryClassStudentInfo(){
	$("#trHeadId").siblings().remove();
	$("#resultPald").css("display","block");
	$.ajax({
		url:"queryClassStudentInfo.do",
		type:"post",
		async:true,
		dataType:"text",
		data:$("#newForm").serialize(),
		success:function(data){
			var resList = eval("("+data+")");
			if(resList.length){
				for(var ind in resList){
					var content = "<tr><td>"+resList[ind]["studentName"] + "</td><td>"
									+(resList[ind]["gender"]=='M'?'男':'女') + "</td><td>"
									+resList[ind]["telNo"] + "</td></tr>" ;
					$("#table02").append(content);	
				};
			}else{
				var content = "<tr><td colspan=6>无符合条件查询结果</td></tr>" ;
				$(content).appendTo("#table02");
			}
		},
		error:function(data){
			var resList = data;
			alert("查询失败");
		}
	});
	
}
</script>

</body>